import React, { PureComponent } from 'react';
import { View, Image, Text, TouchableOpacity, ViewPropTypes, StyleSheet } from 'react-native';

type Props = {
  title?: String,
  titleStyle?: ViewPropTypes.style,   //?是可选意思
  icon?: any,
  iconStyle?: ViewPropTypes.style,   //?是可选意思
  onPress?: Function
}
type State = {

}
class NavigationItem extends PureComponent<Props> {
  constructor(props) {
    super(props);
  }
  render () {
    let { title, titleStyle, icon, iconStyle, onPress } = this.props
    let titleEle = title && (
      <Text style={[styles.title, titleStyle]} > {title} </Text>
    )
    let iconEle = icon && (
      <Image source={icon} style={[styles.icon, iconStyle]} />
    )
    return (
      <TouchableOpacity onPress={onPress} style={styles.container}>
        {titleEle}
        {iconEle}
      </TouchableOpacity>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 15,
    color: '#333333',
    margin: 8
  },
  icon: {
    width: 27,
    height: 27,
    margin: 8
  }
})

export default NavigationItem;
